<div class="ngm-modal-sidenav ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto p-4 group">
  <div class="w-full flex justify-start items-center my-2" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'PAC.MODEL.CREATE_ENTITY.CREATE_ENTITY' | translate: { Default: 'Create Entity' } }}
    </span>
  </div>

  <form class="flex-1 flex flex-col justify-start items-stretch"
    [formGroup]="formGroup"
    (ngSubmit)="onSubmit($event)"
  >

    <div class="mx-2 my-4">
      <label for="entityType" class="mr-2">
        {{ 'PAC.MODEL.CREATE_ENTITY.TYPE' | translate: { Default: 'Type' } }}
      </label>
      <mat-button-toggle-group name="entityType" formControlName="type" ngmAppearance="outline" color="accent" displayDensity="compact">
        <mat-button-toggle [value]="SemanticModelEntityType.CUBE">
          {{ 'PAC.MODEL.CREATE_ENTITY.CUBE' | translate: { Default: 'Cube' } }}
        </mat-button-toggle>
        <mat-button-toggle [value]="SemanticModelEntityType.DIMENSION">
          {{ 'PAC.MODEL.CREATE_ENTITY.DIMENSION' | translate: { Default: 'Dimension' } }}
        </mat-button-toggle>
        <mat-button-toggle *ngIf="modelType===MODEL_TYPE.OLAP" [value]="SemanticModelEntityType.VirtualCube">
          {{ 'PAC.MODEL.CREATE_ENTITY.VirtualCube' | translate: { Default: 'Virtual Cube' } }}
        </mat-button-toggle>
      </mat-button-toggle-group>
    </div>

    <mat-form-field appearance="fill" color="accent">
      <mat-label>{{ 'PAC.MODEL.CREATE_ENTITY.NAME' | translate: { Default: 'Name' } }}</mat-label>
      <input matInput formControlName="name"/>
      <mat-error *ngIf="name.invalid">{{getErrorMessage() | translate}}</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" color="accent">
      <mat-label>{{ 'PAC.MODEL.CREATE_ENTITY.LABEL' | translate: { Default: 'Caption' } }}</mat-label>
      <input matInput formControlName="caption" />
    </mat-form-field>

    <code *ngIf="expression">
      {{expression}}
    </code>

    <mat-form-field *ngIf="!expression && !hiddenTable && type.value !== SemanticModelEntityType.VirtualCube" appearance="fill" color="accent">
      <mat-label>{{ 'PAC.MODEL.CREATE_ENTITY.TABLE' | translate: { Default: 'Table' } }}</mat-label>
      <input [placeholder]=" 'PAC.MODEL.CREATE_ENTITY.PICK_ONE_TABLE' | translate: { Default: 'pick one table' } "
             aria-label="Table"
             matInput
             [matAutocomplete]="auto"
             formControlName="table"
             >
      <mat-autocomplete #auto="matAutocomplete" displayDensity="compact" class="ngm-density__compact">
        <mat-option *ngFor="let option of filteredTables | async" [value]="option.name">
          <ngm-display-behaviour [option]="{value: option.name, label: option.label}" displayBehaviour="descriptionAndId"></ngm-display-behaviour>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>

    <button type="submit"></button>
  </form>

  <div class="w-full flex justify-end">
    <div ngmButtonGroup>
      <button mat-flat-button mat-dialog-close>
        {{ 'PAC.ACTIONS.CANCEL' | translate: { Default: 'Cancel' } }}
      </button>
      <button mat-raised-button color="accent" [disabled]="formGroup.invalid" (click)="apply()">
        {{ 'PAC.ACTIONS.APPLY' | translate: { Default: 'Apply' } }}
      </button>
    </div>
  </div>
  
</div>

<div class="min-w-[400px] p-4 relative flex flex-col">
  @switch (type.value) {
    @case(SemanticModelEntityType.CUBE) {
      <div class="px-4 flex gap-4">
        <div class="flex-1">
          {{ 'PAC.MODEL.CREATE_ENTITY.Field' | translate: { Default: 'Field' } }}
        </div>
        <div class="w-10 overflow-hidden text-ellipsis">
          {{ 'PAC.MODEL.CREATE_ENTITY.Measure' | translate: { Default: 'Measure' } }}
        </div>
        <div class="w-10 overflow-hidden text-ellipsis">
          {{ 'PAC.MODEL.CREATE_ENTITY.Dimension' | translate: { Default: 'Dimension' } }}
        </div>
        <div class="" style="width: 150px;">
          {{ 'PAC.MODEL.CREATE_ENTITY.AssociatedDimension' | translate: { Default: 'Associated' } }}
        </div>
      </div>
      <mat-list role="list" class="block overflow-auto">
        @for (column of columns; track column.name) {
          <mat-list-item role="listitem" class="group rounded-lg">
            <div class="flex items-center">
              <ngm-display-behaviour class="flex-1 ml-8" [option]="{key: column.name, caption: column.caption}" displayBehaviour="descriptionAndId"></ngm-display-behaviour>
              <div class="mx-4 w-10 shrink-0 flex justify-center">
                <mat-checkbox [(ngModel)]="column.isMeasure" (ngModelChange)="toggleMeasure($event, column)"/>
              </div>
              <div class="mx-4 w-10 shrink-0 flex justify-center">
                <mat-checkbox [(ngModel)]="column.isDimension" (ngModelChange)="toggleDimension($event, column)"/>
              </div>
              <div style="width: 140px;" class="shrink-0">
                <mat-select *ngIf="!column.isMeasure"
                  class="ngm-density__compact p-1 rounded-md hover:bg-slate-500/10 dark:hover:bg-white/10 focus:bg-slate-500/20 dark:focus:bg-white/20 dark:caret-slate-100"
                  panelClass="ngm-select-panel ngm-density__compact"
                  [(ngModel)]="column.dimension"
                >
                  <mat-select-trigger>
                    <ngm-display-behaviour *ngIf="column.dimension" class="flex-1" [option]="{key: column.dimension.name, caption: column.dimension.caption}"></ngm-display-behaviour>
                    <span *ngIf="!column.dimension">
                      {{ 'PAC.MODEL.CREATE_ENTITY.AssociatedDimension' | translate: { Default: 'Dimension' } }}
                    </span>
                  </mat-select-trigger>
                  <mat-option [value]="null">
                    {{ 'PAC.KEY_WORDS.None' | translate: { Default: 'None' } }}
                  </mat-option>
                  <mat-option *ngFor="let dimension of sharedDimensions()" [value]="dimension">
                    <ngm-display-behaviour class="flex-1" [option]="{key: dimension.name, caption: dimension.caption}"></ngm-display-behaviour>
                  </mat-option>
                </mat-select>
              </div>
            </div>
          </mat-list-item>
        }
      </mat-list>
    } @case(SemanticModelEntityType.DIMENSION) {
      <div class="px-4 flex gap-4">
        <span class="w-12 text-center">
          {{ 'PAC.MODEL.CREATE_ENTITY.PrimaryKey' | translate: { Default: 'Key' } }}
        </span>
        <span class="w-12">
          {{ 'PAC.MODEL.CREATE_ENTITY.Visible' | translate: { Default: 'Visible' } }}
        </span>
  
        <span class="flex-1">
          {{ 'PAC.MODEL.CREATE_ENTITY.Caption' | translate: { Default: 'Caption' } }}
        </span>
        <span class="w-12">
          {{ 'PAC.MODEL.CREATE_ENTITY.Field' | translate: { Default: 'Field' } }}
        </span>
      </div>
      <div class="overflow-auto">
        <mat-list role="list" cdkDropList (cdkDropListDropped)="drop($event)">
          <mat-list-item *ngFor="let column of columns" cdkDrag
            role="listitem" class="group rounded-lg">
            <div class="w-full h-full flex items-center">
              <mat-checkbox class="group-hover:opacity-100" style="line-height: 1;"
                [class.opacity-0]="column.name !== primaryKey"
                [checked]="column.name === primaryKey"
                (change)="primaryKey = $event.checked ? column.name : null"
              ></mat-checkbox>
        
              <mat-icon class="ml-6 cursor-pointer group-hover:opacity-100" [class.opacity-0]="!column.visible"
                fontSet="material-icons-outlined"
                (click)="column.visible=!column.visible"
              >
                {{column.visible ? 'visibility' : 'visibility_off'}}
              </mat-icon>
              <ngm-display-behaviour class="flex-1 ml-8" [option]="{key: column.name, caption: column.caption}" displayBehaviour="descriptionAndId"></ngm-display-behaviour>
            </div>
          </mat-list-item>
        </mat-list>
      </div>
    } @case(SemanticModelEntityType.VirtualCube) {
      <mat-selection-list class="overflow-auto" [compareWith]="compareWithCube" [(ngModel)]="cubes">
        <mat-list-option *ngFor="let cube of cubes$ | async" class="rounded-lg" [value]="cube">
          <ngm-display-behaviour class="flex-1" [option]="{key: cube.name, caption: cube.caption}" displayBehaviour="descriptionAndId"></ngm-display-behaviour>
        </mat-list-option>
      </mat-selection-list>
    }
  }

  @if (loading) {
    <div class="absolute w-full h-full top-0 left-0 flex justify-center items-center cursor-none">
      <mat-spinner strokeWidth="1" diameter="30"></mat-spinner>
    </div>
  }
  
</div>
